<template>
  <div>

    <van-swipe
    :autoplay="swipe.autoplay"
    :height="size.height"
    :width="size.width"
    :indicator-color="swipe.indicator_color"
    >
      <van-swipe-item
        v-for="item in swipe.list"
        :key="item.id"
        style="background-color: #4D4D4D;"
      >
        <van-image
          lazy-load
          fit="fill"
          :radius="swipe.image.radius"
          :height="size.height"
          :src="item.image"
          @click="onJump(item.href,item.way)"
        />
      </van-swipe-item>
    </van-swipe>

  </div>
</template>

<script>
import Vue from 'vue';
import { Lazyload } from 'vant';

Vue.use(Lazyload);
export default {
  data() {
    return {
      size: {
        height: null,
        width: null,
      },
    };
  },
  // 接受参数
  props: {
    // 接参
    swipe: Array,
  },
  // 方法
  methods: {
    // 页面跳转事件
    Jump_page(href, way) {
      if (href) {
        if (way) {
          // url
          window.location.replace(href);
        } else {
          // route
          this.$router.push({ path: href });
        }
      }
    },
  },
  // 载入
  mounted() {
    // 获取屏幕分辨率
    let w = document.documentElement.clientWidth;
    // let h = document.documentElement.clientHeight;
    // this.size.height = w * 1.03; // 美学比例
    this.size.height = w * 0.89;
    this.size.width = w;
  },
};
</script>
<!--
// 传值方法
      swipe: {
        height: '', // 高度
        width: '', // 宽度
        indicator_color: 'white', // 指示器颜色
        autoplay: 5000, // 切换时间，单位毫秒
        // 图片样式
        image: {
          radius: 0, // 圆角半径
        },
        // 图片列表
        list: [
          {
            way: false, // 跳转链接方式，true为url地址跳转，false为路由跳转
            href: 'http://www.baidu.com',
            // image: 'https://img.yzcdn.cn/vant/cat.jpeg',
            image: null,
          },
          {
            way: false,
            href: 'http://www.google.com',
            // image: 'https://img.yzcdn.cn/vant/cat.jpeg',
          },
          {
            way: true,
            href: 'http://www.baidu.cn',
            image: 'https://img.yzcdn.cn/vant/cat.jpeg',
          },
        ],
      },

-->
